<template>
  <div class="detailBox">
    <div v-for="(item,index) in showList" class="content" @click="chooseGood(item,index)" @dblclick="toDetail(item.id)">
      <div class="box flex flex-row">
        <div class="check flex a-item j-content">
          <input v-model="item.checked" type="checkbox" @click="checkData(item)"></div>
        <div class="code flex a-item j-content">{{ item.code }}</div>
        <div class="flex a-item j-content">
          <div class="type flex a-item j-content">{{ item.type }}</div>
        </div>
        <div class="name flex a-item j-content">{{ item.customerName }}</div>
        <div class="text flex a-item j-content">{{ item.isPrint===1 ? '已打印' : '未打印' }}</div>
        <div class="text2 flex a-item j-content">箱数：{{ item.acceptBoxCount }}</div>
        <div class="text2 flex a-item j-content">金额：{{ item.acceptTaxAmount }}</div>
        <div class="text2 flex a-item j-content">单据状态：{{ item.orderStatus }}</div>
      </div>
      <!--    审核PASS 反审REJECT 关闭CLOSED 作废INVALID 中止STOP 恢复RECOVER 启用ENABLE 禁用DISABLE-->

      <div class="btnBox">
        <div
          v-permission="permission.pass"
          class="boxSpan"
          @click="passOrReject(item.id,'PASS')"
        >
          审核
        </div>
        <div
          v-permission="permission.reject"
          class="boxSpan"
          @click="passOrReject(item.id,'REJECT')"
        >反审
        </div>
        <div
          v-permission="permission.copy"
          class="boxSpan"
          @click="copy(item.id)"
        >复制
        </div>
        <div
          v-permission="permission.invalid"
          class="boxSpan"
          @click="passOrReject(item.id,'INVALID')"
        >作废
        </div>
        <div
          v-permission="permission.invalid"
          class="boxSpan"
          @click="passOrReject(item.id,'RECOVER')"
        >取消作废
        </div>
        <div
          v-permission="permission.accept"
          class="boxSpan"
          @click="accept(item)"
        >验收
        </div>
        <div
          v-permission="permission.accept"
          class="boxSpan"
          @click="unAccept(item.id)"
        >取消验收
        </div>
        <!--      <div class="boxSpan">打印</div>-->
        <!--      <div class="boxSpan">打印预览</div>-->
        <div
          v-permission="permission.reject"
          class="boxSpan"
          @click="superReject(item.id)"
        >一键反审
        </div>
        <div
          v-permission="permission.superCancel"
          class="boxSpan"
          @click="superCancel(item.id)"
        >一键核销
        </div>
        <div
          v-permission="permission.superUnCancel"
          class="boxSpan"
          @click="superUnCancel(item.id)"
        >一键反核销
        </div>
      </div>

    </div>
    <el-dialog
      title="核销"
      :visible.sync="superCancelShow"
      width="30%"
    >
      <div>
        <el-form ref="cancelForm" label-width="80px" :model="cancel" :rules="cancelRules">
          <el-form-item label="银行" prop="bankId">
            <zSelect :value.sync="cancel.bankId" url="api/dropDown/basBankList" />
          </el-form-item>
          <el-form-item label="收款金额" prop="receiptAmount">
            <el-input v-model="cancel.receiptAmount" type="number" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="cancel.receiptRemark" type="textarea" />
          </el-form-item>
          <!--            <el-form-item label="已核销金额">-->
          <!--              <el-input disabled v-model="crud.order.cancelAmount"></el-input>-->
          <!--            </el-form-item>-->
          <!--            <el-form-item label="未核销金额">-->
          <!--              <el-input disabled v-model="crud.order.unCancelAmount"></el-input>-->
          <!--            </el-form-item>-->
        </el-form>
      </div>
      <div class="flex flex-reverse">
        <el-button @click="saveCancel">确定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { passOrReject, copy, accept, unAccept, superReject, superCancel } from '@/api/erp/salesOrder'
import { superUnCancel } from '../../api/erp/salesOrder'
import { getVisualOrder } from '../../api/erp/salesOrderVisual'

export default {
  name: 'SaleForm',
  props: {
    orderStatus: {
      type: String,
      default: null
    },
    data: {
      type: Object,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      // tableColumnList: []

      // data: {
      //   checked: false,
      //   code: 256607,
      //   type: '普通',
      //   customerName: '三利椒江金海店'
      // },
      permission: {
        add: ['admin', 'salesOrder:add'],
        edit: ['admin', 'salesOrder:edit'],
        del: ['admin', 'salesOrder:del'],
        import: ['admin', 'salesOrder:import'],
        export: ['admin', 'salesOrder:export'],
        copy: ['admin', 'salesOrder:copy'],
        upload: ['admin', 'salesOrder:upload'],
        download: ['admin', 'salesOrder:download'],
        pass: ['admin', 'salesOrder:pass'],
        reject: ['admin', 'salesOrder:reject'],
        superReject: ['admin', 'salesOrder:reject'],
        closed: ['admin', 'salesOrder:closed'],
        invalid: ['admin', 'salesOrder:invalid'],
        stop: ['admin', 'salesOrder:stop'],
        recover: ['admin', 'salesOrder:recover'],
        history: ['admin', 'salesOrder:history'],
        accept: ['admin', 'salesOrder:accept'],
        lockStock: ['admin', 'salesOrder:lockStock'],
        superPass: ['admin', 'salesOrder:superPass'],
        ignorePromotionPass: ['admin', 'salesOrder:ignorePromotionPass'],
        saveAndPass: ['admin', 'salesOrder:saveAndPass'],
        priceInfo: ['admin', 'salesOrder:priceInfo'],
        salesHistory: ['admin', 'salesOrder:salesHistory'],
        exportDetail: ['admin', 'salesOrder:exportDetail'],
        print: ['admin', 'salesOrder:print'],
        addDetail: ['admin', 'salesOrder:addDetail'],
        batchAddDetail: ['admin', 'salesOrder:batchAddDetail'],
        salesGiftList: ['admin', 'salesOrder:salesGiftList'],
        split: ['admin', 'salesOrder:split'],
        copyToReturn: ['admin', 'salesOrder:copyToReturn'],
        emptyBox: ['admin', 'salesOrder:emptyBox'],
        superCancel: ['admin', 'salesOrder:superCancel'],
        superUnCancel: ['admin', 'salesOrder:superUnCancel'],
        recycle: ['admin', 'salesOrder:recycle'],
        unRecycle: ['admin', 'salesOrder:unRecycle']
      },
      cancelRules: {
        bankId: [
          { required: true, message: '请选择银行', trigger: 'blur' }
        ],
        receiptAmount: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ]
      },
      chooseGoods: false,
      showBox: false,
      showList: [],
      superCancelShow: false,
      cancel: {
        bankId: null,
        receiptAmount: null,
        receiptRemark: null
      },
      isRefresh: false,
      dataCount: 0,
      chooseData: [], // 选中的所有id
      chooseDataAll: []// 选中的所有数据

    }
  },
  watch: {
    data: {
      handler(n) {
        this.setShowList()
      },
      deep: true
    }
  },
  mounted() {
    // this.showList=Object.assign({},this.data)
    // this.showList.forEach((item,index)=>{
    //   console.log(this.showList[index])
    //   this.$set(this.showList[index],'showBox',false)
    // })
    this.options.box = document.querySelector('.detailBox')
    // this.options.box.style.height = this.options.showRow * this.options.rowHeight +'px'
    // this.options.box.style.height = (this.options.rowHeight * this.options.showRow) +'px'
    this.options.nodeParent = document.querySelector('.formContent')
    this.options.nodeParent.addEventListener('scroll', this.setShowList)
    this.setShowList()
  },

  methods: {
    toDetail(id) {
      this.$router.push({ path: `salesorderDetail/${id}` })
    },

    setShowList(e) {
      if (this.loading) return
      this.options.startIndex = ~~(this.options.nodeParent.scrollTop / this.options.rowHeight)
      this.showList = this.data.slice(this.options.startIndex, this.options.startIndex + this.options.showRow)
      // this.$emit('showList',this.showList)
      const padTop = this.options.startIndex * this.options.rowHeight
      const end = this.data.length - (this.options.startIndex + this.options.showRow)
      if (this.options.startIndex + this.options.showRow >= this.data.length) {
        this.$emit('query', true)
      }
      const padEnd = end * this.options.rowHeight
      this.options.box.style.marginTop = padTop + 'px'
      this.options.box.style.marginBottom = padEnd + 'px'
    },

    checkData(item) {
      this.$set(item,'checked',!item.checked)
      this.chooseData = this.showList.filter(item=>item.checked).map(item=>item.id)

      this.$emit('chooseData', this.chooseData)
    },
    superUnCancel(id) {
      const that = this
      superUnCancel({ id: id }).then(res => {
        if (res.status === 200) {
          that.$message.success(res.msg)
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    superCancel(id) {
      this.superCancelShow = true
      sessionStorage.setItem('Id', id)
    },
    saveCancel() {
      const id = parseInt(sessionStorage.getItem('Id'))
      // console.log(this.cancel,parseInt(sessionStorage.getItem('Id')))
      this.$refs['cancelForm'].validate((valid) => {
        if (valid) {
          const that = this
          superCancel({ ...this.cancel, id }).then(res => {
            if (res.status === 200) {
              for (const key in that.cancel) {
                that.cancel[key] = null
              }
              that.$message.success(res.msg)
              that.superCancelShow = false
            } else {
              that.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    superReject(id) {
      superReject(id).then(res => {

      })
    },
    unAccept(id) {
      unAccept({ ids: [id], isCleanReceiveDate: 1 }).then(res => {

      })
    },
    accept(item) {
      accept({ ids: [item.id], exchangeWarehouseId: item.exchangeWarehouseId }).then(res => {

      })
    },
    passOrReject(id, type) {
      passOrReject({ ids: [id], type: type }).then(res => {
        if (res.status === 200) {
          this.$message.success(res.msg)
          this.refresh()
        }
      })
    },
    copy(id) {
      copy(id).then(res => {
        this.refresh()
      })
    },
    refresh() {
      this.isRefresh = true
      this.$emit('refresh', this.isRefresh)
    },
    chooseGood(val, orderIndex) {
      this.chooseGoods = true
      this.$emit('chooseGoods', this.chooseGoods)
      this.$emit('orderId', val.id)
      this.$emit('orderIndex', val)
    }

  }
}
</script>

<style lang="scss" scoped>
.detailBox {
  .content{
    height: 80px;
    border:  rgba(203, 203, 203, 0.8);
    margin-top: 5px;
    font-size: 14px;
    &:hover {
      background: rgba(231, 241, 255, 1);
    }
    &:hover .btnBox{
      display: block;
    }
    .box {
      height: 30px;

      .check {
        width: 50px;
        height: 100%;
        color: #0000cc;

      }

      .code {
        padding: 0 10px;
        color: #409EFF;
      }

      .type {
        margin: 0 10px;
        border: #0b9c54 1px solid;
        color: #0b9c54;
      }

      .name {
        cursor: pointer;
        color: #409EFF;
      }

      .text{
        padding: 0 10px;
        color: red;
      }

      .text2{
        padding: 0 10px;
      }
    }
  }

  .btnBox {
    border-radius: 3px;
    background: #409EFF;
    height: 20px;
    width: max-content;
    position: relative;
    bottom: 0;
    left: 119px;
    top: 3px;
    display: none;
    .boxSpan {
      display: inline;
      position: relative;
      cursor: pointer;
      padding: 3px;
      font-weight: bolder;
      font-size: 10px;
      color: white;
    }
  }
}
</style>
